<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Search</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
	<h1>Search assistant</h1>
	<hr/>
	<form> 
		Input：<input type="text" id="txt" name="q"/>
	</form>
	<div id="hint" style="margin-left:55px" ></div>
	<script type="text/javascript">
        $(function(){
            $("input:first").on("keyup",function(e){
            	if($(this).val().length==0){
            		return;
            	}
                $("#hint").empty();
                $.ajax({
                    type:"GET",
                    url:"http://localhost:9090/Homework_W5Tues/query?q="+$(this).val()
                }).done(function(msg){
                    msg.forEach(function(item,index,ary){
//                        $("#hint").append($("<p></p>").text(item));
                        $("<p></p>").text(item).appendTo($("#hint"));
                    });
                });
            });
        });
	</script>
</body>
</html>